<template>
  <div class="right-board">
    <el-tabs v-model="currentTab" class="center-tabs">
      <el-tab-pane :label="$t('openProcess.RightPanel.56ckm1ubay00')" name="field" />
      <!-- <el-tab-pane label="表单属性" name="form" /> -->
    </el-tabs>
    <div class="field-box">

      <el-scrollbar class="right-scrollbar">
        <!-- 组件属性 -->
        <el-form v-show="currentTab==='field' && showField" size="small" label-width="90px" :model="activeData">
          <el-form-item v-if="activeData.type" :label="$t('openProcess.RightPanel.56ckm1ubd680')">
            <el-select
              disabled
              v-model="activeData.type"
              :placeholder="$t('openProcess.RightPanel.56ckm1ubdo00')"
              :style="{width: '100%'}"
              @change="tagChange"
              class="select-list"
            >
              <el-option-group v-for="group in tagList" :key="group.label" :label="group.label" >
                <el-option
                  v-for="item in group.options"
                  :key="item['title_'+langSuffix]"
                  :label="item['title_'+langSuffix]"
                  :value="item.type"
                >
                  <svg-icon class="node-icon" :icon-class="item.tagIcon" />
                  <span> {{ item['title_'+langSuffix] }}</span>
                </el-option>
              </el-option-group>
            </el-select>
          </el-form-item>
          <el-form-item v-if="activeData.name!==undefined" :label="$t('openProcess.RightPanel.56ckm1ube1c0')">
            <el-input v-model="activeData.name" :placeholder="$t('openProcess.RightPanel.56ckm1ubeds0')"   />
          </el-form-item>
          <el-form-item v-if="activeData.componentName!==undefined" :label="$t('openProcess.RightPanel.56ckm1ubes00')">
            {{ activeData.componentName }}
          </el-form-item>
          <div v-for="(itemFor,forIndex) in forList" :key="forIndex">

              <el-form-item v-if="activeData[itemFor.key]!==undefined" :label="$t('openProcess.RightPanel.56ckm1ubf980')+itemFor.value">
                <el-input v-model="activeData[itemFor.key]" :placeholder="$t('openProcess.RightPanel.56ckm1ubft40')+itemFor.value" @input="changeRenderKey" 
                :type="['textarea','switch','upload','firstTitle','text'].includes(activeData.type)?'textarea':'text'"
                />
              </el-form-item>
          </div>
         
          <el-form-item v-if="activeData.maxlength !== undefined" :label="$t('openProcess.RightPanel.56ckm1ubg500')">
            
          <!-- prop="maxlength"
          :rules="[{type:'number',pattern:/^\d{1,}$/,message:$t('openProcess.RightPanel.56ckm1ubgfk0'),trigger: 'blur'}]" -->
            <el-input v-model.trim.number="activeData.maxlength" :placeholder="$t('openProcess.RightPanel.56ckm1ubgqg0')">
              <template slot="append">
                {{$t('openProcess.RightPanel.56ckm1ubh800')}}
              </template>
            </el-input>
          </el-form-item>

          <el-form-item v-if="activeData.type !==undefined && ['select','radio','checkbox'].includes(activeData.type)" :label="$t('common.common41')">
            <el-input
              :value="setDefaultValue(activeData.defaultValue)"
              :placeholder="$t('common.common42')"
              @input="onDefaultValueInput"
              :disabled="activeData.type=='switch'?true:false"
            />
          </el-form-item>
          
          <el-form-item v-if="activeData.is_require !== undefined" :label="$t('openProcess.RightPanel.56ckm1ubhio0')">
            <el-switch v-model="activeData.is_require" 
                :active-value="1"
                :inactive-value="0"/>
          </el-form-item>

          <template v-if="activeData.type && activeData.type !=='undefined' && ['select','textarea','text','switch','radio','checkbox','row'].includes(activeData.type)" >
            <el-divider>{{$t('openProcess.RightPanel.56ckm1ubhrc0')}}</el-divider>
            <div class="err_tip">
              <p v-show="activeData.type=='select'">
                {{$t('openProcess.RightPanel.56ckm1ubhzw0')}}
              </p>
              <p v-show="activeData.type=='textarea'">
                {{$t('openProcess.RightPanel.56ckm1ubi800')}}
                {{$t('openProcess.RightPanel.56ckm1ubigg0')}}<span>{{$t('openProcess.RightPanel.56ckm1ubioo0')}} <i>(+86)1234 5678</i>。</span>”
              </p>
              <p v-show="activeData.type=='text'">
                 {{$t('openProcess.RightPanel.56ckm1ubiww0')}}
              </p>
              <p v-show="activeData.type=='switch'">
                {{$t('openProcess.RightPanel.56ckm1ubj5k0')}}
                {{$t('openProcess.RightPanel.56ckm1ubigg0')}}<span>{{$t('openProcess.RightPanel.56ckm1ubjfw0')}}<i>{{$t('openProcess.RightPanel.56ckm1ubjn00')}}</i>，{{$t('openProcess.RightPanel.56npb2mcp001')}}</span>”
              </p>
              <p v-show="(activeData.type=='radio' || activeData.type=='checkbox')">
                  {{$t('openProcess.RightPanel.56ckm1ubjx40')}}
              </p>
              <p v-show="activeData.type=='row'">
                {{$t('openProcess.RightPanel.56npb2mcp000')}}
              </p>
            </div>
          </template>

       
          <template v-if="['el-checkbox-group', 'el-radio-group', 'el-select'].indexOf(activeData.tag) > -1">
            <el-divider>{{$t('openProcess.RightPanel.56ckm1ubk4g0')}}</el-divider>
            <draggable
              :list="activeData.options"
              :animation="340"
              group="selectItem"
              handle=".option-drag"
            >
              <div v-for="(item, index) in activeData.options" :key="index" class="select-item">
                <div class="select-line-icon option-drag">
                  <i class="el-icon-s-operation" />
                </div>
                <el-input
                  :placeholder="$t('openProcess.RightPanel.56ckm1ubkb40')"
                  size="small"
                  :value="item.value"
                  @input="setOptionValue(item, $event)"
                />
                <div class="close-btn select-line-icon" @click="activeData.options.splice(index, 1)">
                  <i class="el-icon-remove-outline" />
                </div>
                <div v-for="(Foritem,Forindex) in forList" :key="Forindex" style="width:88%">
                    <el-input v-model="item[Foritem.key]" :placeholder="$t('openProcess.RightPanel.56ckm1ubkhk0')+Foritem.value" size="small" class="w50" />
                </div>
              </div>
            </draggable>
            <div style="margin-left: 20px;">
              <el-button
                style="padding-bottom: 0"
                icon="el-icon-circle-plus-outline"
                type="text"
                @click="addSelectItem"
              >
                {{$t('openProcess.RightPanel.56ckm1ubko80')}}
              </el-button>
            </div>
            <el-divider />
          </template>

          

          <template v-if="activeData.layoutTree">
            <el-divider>{{$t('openProcess.RightPanel.56ckm1ubkzk0')}}</el-divider>
            <el-tree
              :data="[activeData]"
              :props="layoutTreeProps"
              node-key="renderKey"
              default-expand-all
              draggable
            >
              <span slot-scope="{ node, data }">
                <span class="node-label">
                  <svg-icon class="node-icon" :icon-class="data?data.tagIcon:data.tagIcon" />
                  {{ node.label }}
                </span>
              </span>
            </el-tree>
          </template>
          <template v-if="activeData.keyShow">
              <el-divider>{{$t('openProcess.RightPanel.56npjab1pao0')}}</el-divider>
              <el-form-item :label="$t('openProcess.RightPanel.56ckm1ubl8k0')">
                <el-input v-model="activeData.keyName" :placeholder="$t('openProcess.RightPanel.56ckm1ublf80')" />
              </el-form-item>
              <el-form-item :label="$t('openProcess.RightPanel.56ckm1ubllo0')">
                <el-input v-model="activeData.keyValue" :placeholder="$t('openProcess.RightPanel.56ckm1ubls40')" />
              </el-form-item>
          </template>

          <template v-if="Array.isArray(activeData.rule)">
            <el-divider>{{$t('openProcess.RightPanel.56ckm1ublyk0')}}</el-divider>
            <div
              v-for="(item, index) in activeData.rule"
              :key="'info_'+index"
              class="reg-item"
            >
              <span class="close-btn" @click="activeData.rule.splice(index, 1)">
                <i class="el-icon-close" />
              </span>
              <el-form-item :label="$t('openProcess.RightPanel.56ckm1ubm4w0')">
                  <el-select v-model="item.rule" :placeholder="$t('openProcess.RightPanel.56ckm1ubmd80')" style="width:100%" clearable>
                    <el-option
                      v-for="(itemPatt,indexPatt) in patternOptions"
                      :key="'label-'+indexPatt"
                      :label="itemPatt['title_'+langSuffix]"
                      :value="itemPatt.value">
                    </el-option>
                  </el-select>
                <!-- <el-input v-model="item.rule" placeholder="请输入正则" /> -->
              </el-form-item>
              <el-form-item :label="$t('openProcess.RightPanel.56ckm1ubmko0')">
                <el-input v-model="item.error_tip_zh" :placeholder="$t('openProcess.RightPanel.56ckm1ubmrc0')+forList[0].value" clearable/>
              </el-form-item>
              <el-form-item :label="$t('openProcess.RightPanel.56ckm1ubmko0')">
                <el-input v-model="item.error_tip_en" :placeholder="$t('openProcess.RightPanel.56ckm1ubmrc0')+forList[1].value" clearable />
              </el-form-item>
              <el-form-item :label="$t('openProcess.RightPanel.56ckm1ubmko0')" style="margin-bottom:0">
                <el-input v-model="item.error_tip_tc" :placeholder="$t('openProcess.RightPanel.56ckm1ubmrc0')+forList[2].value" clearable />
              </el-form-item>
            </div>
            <div style="margin-left: 20px" v-show="activeData.rule<1">
              <el-button icon="el-icon-circle-plus-outline" type="text" @click="addReg">
                {{$t('openProcess.RightPanel.56ckm1ubn440')}}
              </el-button>
            </div>
          </template>
        </el-form>
        
      </el-scrollbar>
    </div>

    <!-- <treeNode-dialog :visible.sync="dialogVisible" title="添加选项" @commit="addNode" /> -->
    <!-- <icons-dialog :visible.sync="iconsVisible" :current="activeData[currentIconModel]" @select="setIcon" /> -->
  </div>
</template>

<script>
import draggable from 'vuedraggable'

import { isArray } from 'util'
import { isNumberStr } from '@/utils/index'
import {
  inputComponents, selectComponents, layoutComponents
} from '@/components/generator/config'
import { saveFormConf } from '@/utils/db'



// 使changeRenderKey在目标组件改变时可用
const needRerenderList = ['tinymce']

export default {
  components: {
    draggable
  },

  props: ['showField', 'activeData', 'formConf'],
  data() {
    return {
      forList:[
        {key:'title_zh',value: this.$t('openProcess.RightPanel.56ckprv6wc00') },
        {key:'title_en',value: this.$t('openProcess.RightPanel.56ckprv6xec0') },
        {key:'title_tc',value: this.$t('openProcess.RightPanel.56ckprv6xec01')}],
      currentTab: 'field',
      currentNode: null,
      dialogVisible: false,
      iconsVisible: false,
      currentIconModel: null,
      patternOptions:[
        {
          title_zh:this.$t('openProcess.RightPanel.56ckm1ubnag0')+this.$t('openProcess.RightPanel.56ckprv6wc00'),
          title_en:this.$t('openProcess.RightPanel.56ckm1ubnag0')+this.$t('openProcess.RightPanel.56ckprv6xec0'),
          title_tc:this.$t('openProcess.RightPanel.56ckm1ubnag0')+this.$t('openProcess.RightPanel.56ckprv6xec01'),
          value:'^[a-zA-Z]+$',//^[a-zA-Z]+$  /^[a-zA-Z]+$/
          error_tip_zh:'',
          error_tip_en:'',
        },
        {
          title_zh:this.$t('openProcess.RightPanel.56ckm1ubnp80')+this.$t('openProcess.RightPanel.56ckprv6wc00'),
          title_en:this.$t('openProcess.RightPanel.56ckm1ubnp80')+this.$t('openProcess.RightPanel.56ckprv6xec0'),
          title_tc:this.$t('openProcess.RightPanel.56ckm1ubnp80')+this.$t('openProcess.RightPanel.56ckprv6xec01'),
          value:'^\\d{1,}$',// /^\d{1,}$/
          error_tip_zh:'',
          error_tip_en:'',
        },
        {
          title_zh:this.$t('openProcess.RightPanel.56ckm1ubo200')+this.$t('openProcess.RightPanel.56ckprv6wc00'),
          title_en:this.$t('openProcess.RightPanel.56ckm1ubo200')+this.$t('openProcess.RightPanel.56ckprv6xec0'),
          title_tc:this.$t('openProcess.RightPanel.56ckm1ubo200')+this.$t('openProcess.RightPanel.56ckprv6xec01'),
          value:'[^\u4e00-\u9fa5]+$',// /^\d{1,}$/
          error_tip_zh:'',
          error_tip_en:'',
        }
      ],
      layoutTreeProps: {
        label(data, node) {
          const config = data
          return data.componentName || `${config['title_'+this.langSuffix]}: ${data.name}`
        }
      }
    }
  },
  computed: {
    
    langSuffix(){
      return this.$store.state.settings.langTail
    },
    documentLink() {
      return (
        this.activeData.__config__.document
        || 'https://element.eleme.cn/#/zh-CN/component/installation'
      )
    },
    tagList() {
      return [
        {
          label: this.$t('openProcess.RightPanel.56ckm1uboi00'),
          options: inputComponents
        },
        {
          label: this.$t('openProcess.RightPanel.56ckm1uboog0'),
          options: selectComponents
        },
        {
          label: this.$t('openProcess.RightPanel.56ckm1ubouo0'),
          options: layoutComponents
        }
      ]
    },
    activeTag() {
      return this.activeData.tag
    },
    isShowMin() {
      return ['el-input-number', 'el-slider'].indexOf(this.activeTag) > -1
    },
    isShowMax() {
      return ['el-input-number', 'el-slider', 'el-rate'].indexOf(this.activeTag) > -1
    },
    isShowStep() {
      return ['el-input-number', 'el-slider'].indexOf(this.activeTag) > -1
    }
  },
  watch: {
    formConf: {
      handler(val) {
        saveFormConf(val)
      },
      deep: true
    }
  },
  methods: {
    addReg() {
      this.activeData.rule.push({
        rule: '',
        error_tip_zh:'',
        error_tip_en:'',
        error_tip_tc:'',
      })
    },
    addSelectItem() {
      this.activeData.options.push({
        title_zh: '',
        title_en: '',
        title_tc: '',
        value: '',
      })
    },
    addTreeItem() {
      ++this.idGlobal
      this.dialogVisible = true
      this.currentNode = this.activeData.options
    },
    renderContent(h, { node, data, store }) {
      return (
        <div class="custom-tree-node">
          <span>{node.label}</span>
          <span class="node-operation">
            <i on-click={() => this.append(data)}
              class="el-icon-plus"
            ></i>
            <i on-click={() => this.remove(node, data)}
              class="el-icon-delete"
            ></i>
          </span>
        </div>
      )
    },
    append(data) {
      if (!data.children) {
        this.$set(data, 'children', [])
      }
      this.dialogVisible = true
      this.currentNode = data.children
    },
    remove(node, data) {
      this.activeData.defaultValue = [] // 避免删除时报错
      const { parent } = node
      const children = parent.data.children || parent.data
      const index = children.findIndex(d => d.id === data.id)
      children.splice(index, 1)
    },
    addNode(data) {
      this.currentNode.push(data)
    },
    setOptionValue(item, val) {
      item.value = val
    },
    setDefaultValue(val) {
      if (Array.isArray(val)) {
        return val.join(',')
      }
      // if (['string', 'number'].indexOf(typeof val) > -1) {
      //   return val
      // }
      if (typeof val === 'boolean') {
        return `${val}`
      }
      return val
    },
    onDefaultValueInput(str) {
      if (isArray(this.activeData.defaultValue)) {
        // 数组
        this.$set(
          this.activeData,
          'defaultValue',
          str.split(',').map(val => (val))
        )
      } else if (['true', 'false'].indexOf(str) > -1) {
        // 布尔
        this.$set(this.activeData, 'defaultValue', JSON.parse(str))
      } else {
        // 字符串和数字
        this.$set(
          this.activeData,
          'defaultValue',
          str
        )
      }
    },
    onSwitchValueInput(val, name) {
      if (['true', 'false'].indexOf(val) > -1) {
        this.$set(this.activeData, name, JSON.parse(val))
      } else {
        this.$set(this.activeData, name, val)
      }
    },
    spanChange(val) {
      this.formConf.span = val
    },
    multipleChange(val) {
      this.$set(this.activeData, 'defaultValue', val ? [] : '')
    },
    rangeChange(val) {
      this.$set(
        this.activeData,
        'defaultValue',
        val ? [this.activeData.min, this.activeData.max] : this.activeData.min
      )
    },
    rateTextChange(val) {
      if (val) this.activeData['show-score'] = false
    },
    rateScoreChange(val) {
      if (val) this.activeData['show-text'] = false
    },
    colorFormatChange(val) {
      this.activeData.defaultValue = null
      this.activeData['show-alpha'] = val.indexOf('a') > -1
      this.activeData.renderKey = +new Date() // 更新renderKey,重新渲染该组件
    },
    openIconsDialog(model) {
      this.iconsVisible = true
      this.currentIconModel = model
    },
    setIcon(val) {
      this.activeData[this.currentIconModel] = val
    },
    tagChange(tagIcon) {
      let target = inputComponents.find(item => item.tagIcon === tagIcon)
      if (!target) target = selectComponents.find(item => item.tagIcon === tagIcon)
      console.log(target)
      this.$emit('tag-change', target)
    },
    changeRenderKey() {
      if (needRerenderList.includes(this.activeData.tag)) {
        this.activeData.renderKey = +new Date()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.right-board {
  width: 350px;
  position: absolute;
  right: 0;
  top: 0;
  padding-top: 3px;
  .field-box {
    position: relative;
    height: calc(100vh - 190px);
    box-sizing: border-box;
    overflow: auto;
  }
  .el-scrollbar {
    height: 100%;
  }
}
.select-item {
  display: flex;
  border: 1px dashed #fff;
  box-sizing: border-box;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;

  & .close-btn {
    cursor: pointer;
    color: #f56c6c;
  }
  & .el-input + .el-input {
    margin-left: 4px;
  }
  .el-input{
      width: 79%;
      margin-bottom: 5px;
  }
  .w50{
    margin-left: 33px !important;
    width:100%
  }
}
.select-item + .select-item {
  margin-top: 4px;
}
.select-item.sortable-chosen {
  border: 1px dashed #409eff;
}
.select-line-icon {
  line-height: 32px;
  font-size: 22px;
  padding: 0 4px;
  color: #777;
}
.option-drag {
  cursor: move;
}
.time-range {
  .el-date-editor {
    width: 227px;
  }
  ::v-deep .el-icon-time {
    display: none;
  }
}
.document-link {
  position: absolute;
  display: block;
  width: 26px;
  height: 26px;
  top: 0;
  left: 0;
  cursor: pointer;
  background: #409eff;
  z-index: 1;
  border-radius: 0 0 6px 0;
  text-align: center;
  line-height: 26px;
  color: #fff;
  font-size: 18px;
}
.node-label{
  font-size: 14px;
}
.node-icon{
  color: #bebfc3;
}
>>>.select-list{
  .el-input.is-disabled .el-input__inner{
    background: transparent;
    color: #606266;
    
  }
  .el-input__suffix{
    display: none;
  }
}
.err_tip{
  color: red;
  font-size: 14px;
  line-height: 20px;
  span{
    color: #303133;
    i{
      color: #409eff;
      font-style:inherit;
    }
  }
}
</style>
